﻿<CodeSnippetTabbed DocLink="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1#html-decoration">
    <CodeSnippetTabPage Text="Razor">@(@"<DxDataGrid ...
            HtmlRowDecoration=""@OnHtmlRowDecoration""
            HtmlDataCellDecoration=""@OnHtmlDataCellDecoration"">
    <DxDataGridColumn Field=""@nameof(Order.Product)"">
    </DxDataGridColumn>
    ...
</DxDataGrid>

@code {
    ...
    void OnHtmlRowDecoration(DataGridHtmlRowDecorationEventArgs<Order> eventArgs)
    {
        if (eventArgs.VisibleIndex % 2 == 1)
            eventArgs.CssClass = "" table-dark"";
        if (eventArgs.DataItem != null && eventArgs.DataItem.UnitsInOrder > largeOrder)
            eventArgs.CssClass = "" table-warning font-weight-bold"";
        else
            eventArgs.Attributes.Add(""data-low-price"", """");
    }
    void OnHtmlDataCellDecoration(DataGridHtmlDataCellDecorationEventArgs<Order> eventArgs)
    {
        eventArgs.CssClass += "" border-0"";

        if (eventArgs.FieldName == nameof(Order.Product))
        {
            if (eventArgs.RowVisibleIndex % 2 == 1)
                eventArgs.Style += "" background-color: rgb(115, 158, 170);"";
            else
                eventArgs.Style += "" background-color: rgb(206, 214, 217);"";

            if (eventArgs.DataItem.UnitsInOrder > largeOrder)
            {
                eventArgs.CssClass += "" font-weight-bold"";
            }
        }
    }
}
")</CodeSnippetTabPage>
</CodeSnippetTabbed>
